<template>
  <div class="register-wrapper">
    <div class="nav">
        <Nav/>
    </div>
    <!-- 外层容器，用于整体布局 -->
    <el-card class="register-card">
      <!-- 使用卡片组件包裹内容，使界面更美观 -->
      <h2 class="register-title">用户注册</h2>
      <el-form
        :model="registerForm"
        :rules="registerRules"
        ref="registerFormRef"
        label-width="100px"
      >
        <!-- 表单组件，绑定数据模型和验证规则，通过ref获取实例 -->
        <el-form-item label="用户名" prop="username">
          <el-input
            v-model="registerForm.username"
            placeholder="请输入用户名"
            clearable
          ></el-input>
          <!-- 输入框组件，双向绑定用户名数据，可清空输入内容 -->
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input
            v-model="registerForm.password"
            placeholder="请输入密码"
            type="password"
            show-password
            clearable
          ></el-input>
          <!-- 密码输入框，显示密码切换按钮，可清空输入内容 -->
        </el-form-item>
        <el-form-item label="确认密码" prop="confirmPassword">
          <el-input
            v-model="registerForm.confirmPassword"
            placeholder="请再次输入密码"
            type="password"
            show-password
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input
            v-model="registerForm.email"
            placeholder="请输入邮箱"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="手机号码" prop="phoneNumber">
          <el-input
            v-model="registerForm.phoneNumber"
            placeholder="请输入手机号码"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleRegister">注册</el-button>
          <el-button @click="resetRegisterForm">返回</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive, inject } from 'vue';
import { ElMessage } from 'element-plus';
import router from '@/router.js';
import Nav from '@/views/Layout/nav.vue'
const axios = inject('$axios');
// 导入Element-UI的消息提示组件，用于显示验证结果等提示信息

// 定义注册表单的数据模型，使用reactive创建响应式对象
const registerForm = reactive({
  username: '',
  password: '',
  confirmPassword: '',
  email: '',
  phoneNumber: '',
});

// 定义注册表单的验证规则，同样使用reactive创建响应式对象
const registerRules = reactive({
  username: [
    { required: true, message: '用户名不能为空', trigger: 'blur' },
    { min: 3, max: 20, message: '用户名长度需在3 - 20个字符之间', trigger: 'blur' },
  ],
  password: [
    { required: true, message: '密码不能为空', trigger: 'blur' },
    { min: 6, message: '密码长度至少为6位', trigger: 'blur' },
  ],
  confirmPassword: [
    { required: true, message: '请再次输入密码', trigger: 'blur' },
    {
      validator: (rule, value, callback) => {
        if (value === registerForm.password) {
          callback();
        } else {
          callback(new Error('两次输入的密码不一致'));
        }
      },
      trigger: ['blur', 'change'],
    },
  ],
  email: [
    { required: true, message: '邮箱不能为空', trigger: 'blur' },
    {
      type: 'email',
      message: '请输入正确的邮箱格式',
      trigger: 'blur',
    },
  ],
  phoneNumber: [
    { required: true, message: '手机号码不能为空', trigger: 'blur' },
    {
      pattern: /^1[3-9]\d{9}$/,
      message: '请输入正确的手机号码',
      trigger: 'blur',
    },
  ],
});

const registerFormRef = ref(null);
// 创建ref对象，用于获取表单实例

const handleRegister = async () => {
  // 处理注册按钮点击事件的函数
  if (!registerFormRef.value.validate()) {
    return;
  }
  // 先进行表单验证，如果验证不通过则直接返回，不执行后续注册逻辑
  try {
    // 这里可以添加实际的注册逻辑，比如发送axios请求到后端保存用户注册信息
    const res = await axios({
        method: 'post',
        url: '/register',
        data: {
            account: registerForm.username,
            password: registerForm.password,
            nickname: registerForm.username,
        }
    });
    // 模拟注册成功提示
    await new Promise((resolve) => setTimeout(resolve, 1000));
    ElMessage.success('注册成功');
  } catch (error) {
    ElMessage.error('注册失败，请稍后重试');
    console.error('注册出现错误：', error);
  }
};

const resetRegisterForm = () => {
  router.push('/login');
};
</script>

<style scoped>
.register-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #d1bfbf;
  /* 页面整体背景色，可根据喜好调整 */
}

.register-card {
  width: 480px;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  background-color: #f1dada;
  /* 卡片样式，设置宽度、圆角和阴影效果，使其更立体 */
}

.register-title {
  text-align: center;
  margin-bottom: 20px;
  color: #343a40;
  /* 标题样式，居中、底部间距、设置颜色 */
}

.el-form-item {
  margin-bottom: 20px;
  /* 表单每项的底部间距 */
}
</style>